import React, { useState } from 'react'
import { Row, Col, Radio, InputNumber, Slider, Button, Checkbox, Popover, Input, Space, Dropdown, Tag, Tooltip } from 'antd'
import UploadImage from '@/components/UploadImage';
import { backgroundObj } from '@/utils/utils'
import './index.less'
const ContactCustomer = (props) => {
    const { selectData, data, edit } = props
    const { selectIndex } = data
    const {
        cover,
        title,
        importText,
        btnText,
        showType,
        showCount,
        modelTitle1,
        modelTitle2,
        code,
        marginType,
        top,
        bottom
    } = selectData
    const [coverVisible, setCoverVisible] = useState(false)
    const [codeVisible, setCodeVisible] = useState(false)
    const handleUpdate = (o) => {
        edit({
            list: data.list.map((val, index) => {
                if (index === selectIndex) {
                    return {
                        ...val,
                        ...o
                    }
                }
                return val
            })
        })
    }
    return <Row gutter={[12, 24]}>
        <Col
            span={24}>
            关注公众号
        </Col>
        <Col className='editor-content-item-label'
            span={24}>
            封面
        </Col>
        <Col span={24}>
            <div className='editor-set-color' onClick={(e) => {
                setCoverVisible({
                    show: true,
                })
            }}>
                {cover ? <div style={backgroundObj(cover)} className='editor-set-uploadBlock'>
                </div> : <div className='editor-set-uploadBlock'>
                    <div className='editor-set-upload'>
                        <i className='icon-jia'></i>
                    </div>
                </div>}
            </div>
        </Col>
        <Col className='editor-content-item-label'
            span={24}>
            公众号名称
        </Col>
        <Col span={24}
        >
            <Input
                onChange={(e) => {
                    handleUpdate({
                        title: e.target.value
                    })
                }}
                value={title} shwCount maxLength={30}></Input>
        </Col>
        <Col className='editor-content-item-label'
            span={24}>
            引导文案
        </Col>
        <Col span={24}
        >
            <Input
                onChange={(e) => {
                    handleUpdate({
                        importText: e.target.value
                    })
                }}
                value={importText} shwCount maxLength={30}></Input>
        </Col>
        <Col className='editor-content-item-label'
            span={24}>
            按钮文案
        </Col>
        <Col span={24}
        >
            <Input
                onChange={(e) => {
                    handleUpdate({
                        btnText: e.target.value
                    })
                }}
                value={btnText} shwCount maxLength={30}></Input>
        </Col>
        <Col className='editor-content-item-label'
            span={24}>
            展示次数设置
        </Col>
        <Col className='editor-content-item-label'
            span={24}>
            <Radio.Group onChange={(e) => {
                handleUpdate({
                    showType: e.target.value
                })
            }} value={showType}>
                <Radio.Button value={'one'}>有限制</Radio.Button>
                <Radio.Button value={'any'}>无限制</Radio.Button>
            </Radio.Group>
        </Col>
        {showType === 'any' && <Col
            span={24}>
            展示次数
            <InputNumber min={1}
                max={10} onChange={(e) => {
                    handleUpdate({ showCount: e })
                }} value={showCount}></InputNumber>
        </Col>}
        <Col
            span={24}>
            弹窗设置
        </Col>
        <Col className='editor-content-item-label'
            span={24}>
            第一行
        </Col>
        <Col span={24}
        >
            <Input
                onChange={(e) => {
                    handleUpdate({
                        modelTitle1: e.target.value
                    })
                }}
                value={modelTitle1} shwCount maxLength={30}></Input>
        </Col>
        <Col className='editor-content-item-label'
            span={24}>
            第二行

        </Col>
        <Col span={24}
        >
            <Input
                onChange={(e) => {
                    handleUpdate({
                        modelTitle2: e.target.value
                    })
                }}
                value={modelTitle2} shwCount maxLength={30}></Input>
        </Col>
        <Col className='editor-content-item-label'
            span={24}>
            公众号二维码
        </Col>
        <Col span={24}>
            <div className='editor-set-color' onClick={(e) => {
                setCodeVisible({
                    show: true,
                })
            }}>
                {code ? <div style={backgroundObj(code)} className='editor-set-uploadBlock'>
                </div> : <div className='editor-set-uploadBlock'>
                    <div className='editor-set-upload'>
                        <i className='icon-jia'></i>
                    </div>
                </div>}
            </div>
        </Col>
        <Col className='editor-content-item-label'
            span={24}>
            外边距：
            <Radio.Group onChange={(e) => {
                handleUpdate({
                    top: 12,
                    bottom: 0,
                    marginType: e.target.value
                })
            }} value={marginType}>
                <Radio value={'detault'}>默认</Radio>
                <Radio value={'customize'}>自定义</Radio>
            </Radio.Group>
        </Col>
        {marginType === 'customize' && <Col
            span={24}>
            <Row gutter={[12, 12]}>
                <Col span={6}>上</Col>
                <Col span={12}>
                    <Slider
                        min={0}
                        max={32}
                        onChange={(e) => handleUpdate({ top: e })}
                        value={top}
                    />
                </Col>
                <Col span={6}><InputNumber min={0}
                    max={32} onChange={(e) => {
                        handleUpdate({ top: e })
                    }} value={top}></InputNumber></Col>
            </Row>
            <Row gutter={[12, 12]}>
                <Col span={6}>下</Col>
                <Col span={12}>
                    <Slider
                        min={0}
                        max={32}
                        onChange={(e) => handleUpdate({ bottom: e })}
                        value={bottom}
                    />
                </Col>
                <Col span={6}><InputNumber min={0}
                    max={32} onChange={(e) => {
                        handleUpdate({ bottom: e })
                    }} value={bottom}></InputNumber></Col>
            </Row>
        </Col>}
        <UploadImage handleImage={(e) => {
            if (e) {
                const { src } = e

                handleUpdate({
                    cover: src
                })
            }
        }} visible={coverVisible} onClose={() => { setCoverVisible(false) }}></UploadImage>
        <UploadImage handleImage={(e) => {
            if (e) {
                const { src } = e

                handleUpdate({
                    code: src
                })
            }
        }} visible={codeVisible} onClose={() => { setCodeVisible(false) }}></UploadImage>
    </Row >
}
export default ContactCustomer
